#@layout()
#define main()
<form class="layui-form layui-form-pane f-form">
    <input type="hidden" class="layui-input" name="taskCode" value="90001"/>

    #(token)
    <div class="layui-row layui-col-space1 task-row">
        #set(req=true)
        #@colStart('设备分组',6)
        <div id="groupDiv">
            #for(data:deviceGroupList)
            <input type="checkbox" name="groupId" lay-filter="groupFilter" title="#(data.name??)#(data.online??)" value="#(data.id??)"/>
            #end
        </div>
        #@colEnd()
    </div>

    <div class="layui-row layui-col-space1 task-row">
        <input lay-skin="primary" type="checkbox" name="type" lay-filter="devideDetails" title="设备明细"/>
    </div>

    <div class="layui-form-item" id="deviceListDiv" style="display: none"></div>

    <div class="layui-row layui-col-space1 task-row">
        #@colStart("是否返回桌面",6)
        <input name="home" type="checkbox" value="1" title="是"/>
        #@colEnd()
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="task_submit" >生成任务</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

#define js()
<script>
    layui.use(['form', 'upload', 'laydate'], function () {

        var form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#startDate',
            theme: 'molv',
            type: 'datetime',
            trigger: 'click',
            max:4073558400000, //公元3000年1月1日
            ready: function(date){
                let now = new Date();
                //console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                this.dateTime.hours=now.getHours();
                this.dateTime.minutes=now.getMinutes();
                this.dateTime.seconds=now.getSeconds();
            }
        });

        form.on('checkbox(groupFilter)', function (data) {
            let groupId = data.value;
            if ($(this).prop('checked')) {
                getDeviceList(groupId, form);
            } else {
                $("#deviceListDiv"+groupId).remove();
            }
        });

        form.on('checkbox(devideDetails)', function (data) {
            $('#deviceListDiv').toggle();
            if($("#deviceListDiv").is(":hidden")){
                $('#deviceListDiv').find("input[type=checkbox]").each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            }
        });

        //全选
        form.on('checkbox(allChoose)', function (data) {
            // var child = $("input[type='checkbox']");
            $(this).parent().find("input[type=checkbox]").each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('select(deviceGroup)', function (data) {
            let groupId = data.elem[data.elem.selectedIndex].value;
            getDeviceList(groupId, form);
        });


        form.on('submit(task_submit)', function (data) {
            let count = $("input[name='groupId']:checked").length;
            if (count < 1) {
                layer.msg('请至少选择一个设备！', {icon: 2});
                return false;
            }

            var fields=$(data.form).serialize();
            $.ajax({
                url : "#(path)/task/save",
                type : "POST",
                async: false,
                dataType : "json",
                data:fields,
                success : function(result) {
                    if (result.code == "success") {
                        layer.msg("发布成功",{icon:1});
                    } else {
                        layer.msg("发布失败",{icon:2});
                    }
                },
                error : function(result) {
                    layer.msg("发布失败",{icon:2});
                }
            });
            return false;
        });
    });

    function getDeviceList(groupId, form) {
        var url = "#(path)/device/group/deviceList?groupId=" + groupId;
        let deviceDiv=$('<div></div>'); //创建一个父div
        deviceDiv.attr('id','deviceListDiv'+groupId); //给父div设置id
        deviceDiv.attr('groupId', groupId);
        deviceDiv.addClass("layui-form-item");
        $.ajax({
            url: url,
            type: "POST",
            // data:params||{},
            success: function (result) {
                if (result.length > 0) {
                    $(deviceDiv).append('<input lay-skin="primary" type="checkbox" name="type" lay-filter="allChoose" title="执行设备"/><br/>');
                }
                for (var i = 0; i < result.length; i++) {
                    var data = result[i];
                    $(deviceDiv).append('<input type="checkbox" name="deviceId" lay-filter="choiceOne" title="' + data.name + data.online +  '" value="' + data.id + '"/>')
                    if ((i+1) % 5 == 0) {
                        $(deviceDiv).append('<br>');
                    }
                }
                $('#deviceListDiv').append(deviceDiv);
                form.render('checkbox');
            }
        });
    }
</script>

#end
<pre style="white-space: pre-wrap;display: block; font-family:monospace; color: #666;">
<b>温馨提示</b>
停止任务
</pre>
#end
